<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优化节点添加</title>
</head>

<body>
    <!-- 节点的添加操作必然会有回流和重绘 -->
    <script>
        for (let i = 0; i < 10; i++) {
            var El_p = document.createElement('p')
            El_p.innerHTML = i
            document.body.appendChild(El_p)
        }
        // createDocumentFragment：节点容器
        var El_frg = document.createDocumentFragment()
        for (let j = 0; j < 10; j++) {
            var El_p = document.createElement('p')
            El_p.innerHTML = j
            El_frg.appendChild(El_p)
        }
        document.body.appendChild(El_frg)

        // jsbench.me：  方法二使用节点容器操作执行效率高于方法一，方法二操作遍历10次在吧容器渲染，方法一遍历10次渲染10次
    </script>

</body>

</html>